<template>
  <div class="main">
    <div class="title" />
    <div class="content">
      <!-- 1 -->
      <div v-if="show===1" class="show">
        <el-row>
          <el-col :span="6" class="a">
            <ik-bar-base-chart
              code="1"
            />
          </el-col>

          <el-col :span="6" class="a">
            <ik-bar-ring-chart code="2" />
          </el-col>

          <el-col :span="6" class="a">
            <ik-bar-stack-chart code="3" />

          </el-col>

          <el-col :span="6" class="a">
            <ik-bar-time-chart
              code="test4-1"
              grid-type="summary"
              data-dimension-min="0"
              data-dimension-max="100"
              data-dimension-interval="20"
              analysis-dimension-field="type"
            />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" class="a">
            <ik-calendar-base-chart code="5" />
          </el-col>
          <el-col :span="6" class="a">
            <ik-line-base-chart code="6" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-line-math-chart code="7" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-line-smooth-chart code="8" />

          </el-col>
        </el-row>
      </div>
      <!-- 2 -->
      <div v-else-if="show===2" class="show">
        <el-row>
          <el-col :span="6" class="a">
            <ik-point-time-chart code="9" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-polar-line-chart code="10" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-polar-point-chart code="11" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-radar-area-chart code="12" />

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6" class="a">
            <ik-radar-base-chart code="13" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-scatter-base-chart code="14" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-scatter-math-chart code="15" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-scatter-time-chart code="16" />

          </el-col>
        </el-row>
      </div>
      <!-- 3 -->
      <div v-else-if="show===3" class="show">
        <el-row>
          <el-col :span="6" class="a">
            <ik-pie-base-chart code="17" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-point-base-chart code="18" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-point-math-chart code="19" />

          </el-col>
          <el-col :span="6" class="a">
            <ik-line-step-chart code="20" />

          </el-col>
        </el-row>

        <el-row>

          <el-col :span="6" class="a">
            <ik-line-time-chart code="21" />
          </el-col>
          <el-col :span="6" class="a">
            <map-one />
          </el-col>
          <el-col :span="6" class="a">
            <ik-board />
          </el-col>
          <el-col :span="6" class="a">
            <ik-board
              :type="1"
              :val="[
                { keyfield: '抢救进度', valuefield: '85%', num: 85 },
                { keyfield: '抢救进度', valuefield: '25%', num: 25 }
              ]"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="button">
      <el-button :disabled="a" size="small" type="primary" icon="el-icon-arrow-left" @click="changepage(1)" />
      <el-button :disabled="b" size="small" type="primary" @click="changepage(2)"><i class="el-icon-arrow-right el-icon--right" /></el-button>
    </div>

  </div>
</template>

<script>

// bar
import IkBarBaseChart from '@/components/ik/echarts/chart/bar/base/IkBarBaseChart'
import IkBarRingChart from '@/components/ik/echarts/chart/bar/ring/IkBarRingChart'
import IkBarStackChart from '@/components/ik/echarts/chart/bar/stack/IkBarStackChart'
import IkBarTimeChart from '@/components/ik/echarts/chart/bar/time/IkBarTimeChart'
// calendar
import IkCalendarBaseChart from '@/components/ik/echarts/chart/calendar/base/IkCalendarBaseChart'
// line
import IkLineBaseChart from '@/components/ik/echarts/chart/line/base/IkLineBaseChart'
import IkLineMathChart from '@/components/ik/echarts/chart/line/math/IkLineMathChart'
import IkLineSmoothChart from '@/components/ik/echarts/chart/line/smooth/IkLineSmoothChart'
import IkLineStepChart from '@/components/ik/echarts/chart/line/step/IkLineStepChart'
import IkLineTimeChart from '@/components/ik/echarts/chart/line/time/IkLineTimeChart'

// pie
import IkPieBaseChart from '@/components/ik/echarts/chart/pie/base/IkPieBaseChart'
// point
import IkPointBaseChart from '@/components/ik/echarts/chart/point/base/IkPointBaseChart'
import IkPointMathChart from '@/components/ik/echarts/chart/point/math/IkPointMathChart'
import IkPointTimeChart from '@/components/ik/echarts/chart/point/time/IkPointTimeChart'
// polar
import IkPolarLineChart from '@/components/ik/echarts/chart/polar/line/IkPolarLineChart'
import IkPolarPointChart from '@/components/ik/echarts/chart/polar/point/IkPolarPointChart'
// radar
import IkRadarAreaChart from '@/components/ik/echarts/chart/radar/area/IkRadarAreaChart'
import IkRadarBaseChart from '@/components/ik/echarts/chart/radar/base/IkRadarBaseChart'
// scatter
import IkScatterBaseChart from '@/components/ik/echarts/chart/scatter/base/IkScatterBaseChart'
import IkScatterMathChart from '@/components/ik/echarts/chart/scatter/math/IkScatterMathChart'
import IkScatterTimeChart from '@/components/ik/echarts/chart/scatter/time/IkScatterTimeChart'

import IkBoard from '@/components/ik/echarts/chart/board/board.vue'

export default {
  components: {
    // pie
    IkPieBaseChart,
    // bar
    IkBarBaseChart,
    IkBarRingChart,
    IkBarStackChart,
    IkBarTimeChart,
    // calendar
    IkCalendarBaseChart,
    // line
    IkLineBaseChart,
    IkLineMathChart,
    IkLineSmoothChart,
    IkLineStepChart,
    IkLineTimeChart,
    // point
    IkPointBaseChart,
    IkPointMathChart,
    IkPointTimeChart,
    // polar
    IkPolarLineChart,
    IkPolarPointChart,
    // radar
    IkRadarAreaChart,
    IkRadarBaseChart,
    // scatter
    IkScatterBaseChart,
    IkScatterMathChart,
    IkScatterTimeChart,
    // IkBoard
    IkBoard

  },
  props: {},
  data() {
    return {
      show: 1,
      a: false,
      b: false,
      time: null
    }
  },
  computed: {},
  watch: {
    time(val, oldvalue) {
      // const time = new Date()
      this.time = val
    }
  },
  created() {

  },
  mounted() {
    // const link = document.createElement('link')
    // // link.type = 'text/scss'
    // link.rel = 'stylesheet'
    // link.href = '../../styles/robot/robot.scss' // css链接
    // const head = document.getElementsByTagName('head')[0]
    // head.appendChild(link)
    setInterval(() => {
      this.gettime()
    }, 1000)
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    changepage(num) {
      if (num === 1 && this.show <= 3) {
        this.show--
        this.b = false

        if (this.show === 1) {
          this.a = true
        }
      } else if (num === 2 && this.show >= 1) {
        this.show++
        this.a = false
        if (this.show === 3) {
          this.b = true
        }
      }
    },

    gettime() {
      const time1 = new Date()
      this.time = time1.toLocaleDateString() + ' ' + time1.toLocaleTimeString()
    }
  }
}
</script>
<style lang='scss' scoped>
.main{
  width: 100%;
  height: 100%;
  position: relative;
  // overflow: auto;

  .title{
    height: 50px;
    width: 100%;
    position: absolute;
    top:0;
    line-height: 50px;
    text-align: center;
    // background-color: red;
    z-index: 99;
    // background-image: url('../../../assets/robot/title.png');
    background-size: 100% 100%;
    color: white;
    font-weight: 800;
    // background-color: #5697F1;
    .logo{
      position: absolute;
      left: 0;
      height: 70%;
      top: 17%;
      width: 155px;
      background-image: url('../../../../assets/robot/logo.png');
      background-size: 100% 100%;
    }
    .time{
      position: absolute;
      right: 15px;
      line-height: 50px;
      font-size: 13px;
      height: 50px;
      top: 0;
      img{
        vertical-align:middle;
        margin: 0 5px 0 0;
        padding: 0;

      }
      span{
        vertical-align:middle;

      }

    }
    .el-image{
      width: 100%;
      height: 100%;
      position: absolute;
      ::v-deep.el-image__inner{
        margin: 0!important;
      }
    }

  }
  .bgmap2{
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url('../../../../assets/robot/bgmap2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 0px;
    background-color: transparent;
  }
  .button{
    width: auto;
    height: 30px;
    position: absolute;
    top: 0;
    right: 20%;
    z-index: 999;
    top:10px
  }

  .content{
    position: absolute;
    width: 100%;
    height: calc(100% - 50px);
    top: 50px;
    .el-row{
      height: 50%;
      .el-col-6{
        // height:-webkit-fill-available;
        height: 100%;
      }
    }

    .show{
      height: 100%;
      width: 100%;
    }
    .left{
      height: 100%;
      // .pie_base_chart{
      //   height: 50%;
      //   // background-color: red;
      // }
    }
    .center{
      height: 100%;

    }
    .right{
      height: 100%;
      // .pie_base_chart{
      //   height: 50%;
      //   // background-color: red;
      // }
    }

  }
}
</style>
<style lang="scss"  >
// @import '../../../styles/robot/robot.scss';
@import '../../../../styles/robot/default.scss';

</style>
